<template>
  <div class="admin-dashboard">
    <!-- 顶部快捷操作区 -->
    <el-row :gutter="20" class="quick-access">
      <el-col :span="12">
        <el-card class="function-card">
          <el-button type="primary" icon="el-icon-folder" size="large" @click="handleFileManagement">
            文件管理
          </el-button>
          <el-button type="success" icon="el-icon-phone" size="large" @click="handleContacts">
            通讯录
          </el-button>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="stats-card">
          <div class="stats-info">
            <div class="stats-item">
              <div class="stats-title">本周出勤率</div>
              <div class="stats-value">95.8%</div>
            </div>
            <div class="stats-item">
              <div class="stats-title">待处理流程</div>
              <div class="stats-value">12</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-section">
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="card-header">
            <span>本周员工出勤率</span>
          </div>
          <div class="chart-container">
            <v-chart :options="attendanceRateOptions" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="card-header">
            <span>本周出勤情况</span>
          </div>
          <div class="chart-container">
            <v-chart :options="attendanceStatusOptions" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 流程管理 -->
    <el-card class="process-management">
      <div slot="header" class="card-header">
        <span>流程管理</span>
        <el-button style="float: right; padding: 3px 0" type="text">查看全部</el-button>
      </div>
      <el-table :data="processes" style="width: 100%">
        <el-table-column prop="type" label="类型" width="120">
          <template slot-scope="scope">
            <el-tag :type="scope.row.tagType">{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
        <el-table-column prop="date" label="申请时间" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="scope.row.statusType">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="handleProcess(scope.row)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
import VChart from 'vue-echarts'

export default {
  name: 'AdminDashboard',
  components: {
    VChart
  },
  data() {
    return {
      // 出勤率图表配置
      attendanceRateOptions: {
        title: {
          text: '周出勤率趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五']
        },
        yAxis: {
          type: 'value',
          min: 80,
          max: 100
        },
        series: [{
          data: [95, 93, 97, 94, 96],
          type: 'line',
          smooth: true
        }]
      },
      // 出勤情况图表配置
      attendanceStatusOptions: {
        title: {
          text: '出勤情况分布'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['正常', '迟到', '缺勤']
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '正常',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#41d885'
            },
            data: [45, 42, 47, 44, 43]
          },
          {
            name: '迟到',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#ffce23'
            },
            data: [3, 4, 2, 3, 2]
          },
          {
            name: '缺勤',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: 'red'
            },
            data: [2, 4, 1, 3, 5]
          }
        ]
      },
      // 流程列表数据
      processes: [
        {
          type: '请假申请',
          tagType: 'warning',
          title: '年假申请-张三',
          applicant: '张三',
          date: '2024-03-21 09:30:00',
          status: '待审批',
          statusType: 'warning'
        },
        {
          type: '报销申请',
          tagType: 'success',
          title: '差旅费报销',
          applicant: '李四',
          date: '2024-03-21 10:15:00',
          status: '处理中',
          statusType: 'primary'
        }
      ]
    }
  },
  methods: {
    handleFileManagement() {
      // 处理文件管理
    },
    handleContacts() {
      // 处理通讯录
    },
    handleProcess(row) {
      // 处理流程
    }
  }
}
</script>

<style lang="scss" scoped>
.admin-dashboard {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: 100vh;

  .quick-access {
    margin-bottom: 20px;

    .function-card {
      padding: 20px;
      text-align: center;

      .el-button {
        margin: 0 10px;
      }
    }

    .stats-card {
      .stats-info {
        display: flex;
        justify-content: space-around;
        padding: 10px 0;

        .stats-item {
          text-align: center;

          .stats-title {
            font-size: 14px;
            color: #909399;
            margin-bottom: 5px;
          }

          .stats-value {
            font-size: 24px;
            font-weight: bold;
            color: black;
          }
        }
      }
    }
  }

  .charts-section {
    margin-bottom: 20px;

    .chart-card {
      .chart-container {
        height: 300px;
      }
    }
  }

  .process-management {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .card-header {
    span {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>
